<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #title>
        <div style="color: #fff">发布房源</div></template
      ></van-nav-bar
    >
    <div
      style="
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        color: #21b97a;
      "
    >
      房源信息
    </div>
    <van-form @submit="onSubmit">
      <van-field
        is-link
        input-align="right"
        v-model="community"
        name="community"
        label="小区名称"
        placeholder="请输入小区名称"
        @click="$router.push('/search')"
      />

      <van-field
        v-model="price"
        name="price"
        label="租金"
        placeholder="请输入租金                                ￥/月"
        :rules="[{ required: true }]"
      />

      <van-field
        v-model="size"
        name="size"
        label="建筑面积"
        placeholder="请输入建筑面积                            m²"
        :rules="[{ required: true }]"
      />

      <van-field
        is-link
        input-align="right"
        name="roomType"
        label="户型"
        :value="roomType"
        placeholder="请选择"
        @click="typePopup"
      >
      </van-field>
      <van-popup
        v-model="displayType"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          visible-item-count="3"
          show-toolbar
          :columns="typeColumns"
          @cancel="displayType = false"
          @confirm="showType"
        />
      </van-popup>

      <van-field
        is-link
        input-align="right"
        name="floor"
        label="所在楼层"
        :value="floor"
        placeholder="请选择"
        @click="floorPopup"
      >
      </van-field>
      <van-popup
        v-model="displayFloor"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          visible-item-count="3"
          show-toolbar
          :columns="floorColumns"
          @cancel="displayFloor = false"
          @confirm="showFloor"
        />
      </van-popup>

      <van-field
        is-link
        input-align="right"
        name="oriented"
        label="朝向"
        :value="oriented"
        placeholder="请选择"
        @click="orientedPopup"
      ></van-field>
      <van-popup
        v-model="displayOriented"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          visible-item-count="3"
          show-toolbar
          :columns="orientedColumns"
          @cancel="displayOriented = false"
          @confirm="showOriented"
        />
      </van-popup>

      <p class="title">房屋标题</p>
      <van-field
        autosize
        name="title"
        v-model="title"
        type="textarea"
        placeholder="请输入标题(例如:整租小区名2室5000元)"
      />

      <p class="title">房屋图像</p>
      <van-field name="houseImg">
        <template #input>
          <van-uploader v-model="fileList" multiple />
        </template>
      </van-field>

      <p class="title">房屋配置</p>
      <van-grid :column-num="5">
        <van-grid-item
          v-for="item in disposition"
          :key="item"
          icon="gift-o"
          :text="item"
        />
      </van-grid>

      <p class="title">房屋描述</p>
      <van-field
        autosize
        name="description"
        v-model="description"
        type="textarea"
        placeholder="请输入房屋描述信息"
      />

      <div class="collection">
        <van-button type="default" block @click="cancel">取消</van-button>
        <van-button type="info" block color="#21b97a" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <div style="margin: 50px"></div>
  </div>
</template>

<script>
import { publishAvailability, imageUpload } from '@/api/article'

export default {
  name: 'release-page',
  data () {
    return {
      title: '',
      description: '',
      houseImg: '',
      oriented: '',
      supporting: '',
      price: '',
      roomType: '',
      size: '',
      floor: '',
      community: this.$store.state.user.community,
      fileList: [],
      displayType: false,
      displayFloor: false,
      displayOriented: false,
      typeColumns: ['一室', '二室', '三室', '四室', '四室+'],
      floorColumns: ['高楼层', '中楼层', '低楼层'],
      orientedColumns: ['东', '西', '南', '北'],
      disposition: [
        '衣柜',
        '洗衣机',
        '空调',
        '天然气',
        '冰箱',
        '暖气',
        '电视',
        '热水器',
        '宽带',
        '沙发'
      ]
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    cancel () {
      this.community = ''
      this.price = ''
      this.size = ''
      this.roomType = ''
      this.floor = ''
      this.oriented = ''
      this.title = ''
      this.houseImg = ''
      this.supporting = ''
      this.description = ''
    },
    async onSubmit (values) {
      values.community = 'AREA|5ce20146-e3fe-e919'
      values.roomType = 'ROOM|20903ae0-c7bc-f2e2'
      values.floor = 'FLOOR|1'
      values.oriented = 'ORIEN|61e99445-e95e-7f37'
      values.supporting = '空调'
      const fd = new FormData()
      fd.append('file', this.fileList[0].file)
      const { body } = await imageUpload(fd)
      values.houseImg = body[0]
      publishAvailability(values)
    },
    typePopup () {
      this.displayType = true
    },
    floorPopup () {
      this.displayFloor = true
    },
    orientedPopup () {
      this.displayOriented = true
    },
    showType (value) {
      this.roomType = value
      this.displayType = false
    },
    showFloor (value) {
      this.floor = value
      this.displayFloor = false
    },
    showOriented (value) {
      this.oriented = value
      this.displayOriented = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #15b572;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
.collection {
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
}
.title {
  text-indent: 15px;
  color: #333;
  font-size: 14px;
  height: 28px;
  border-bottom: 2px solid #f6f5f6;
}
</style>
